{extend name="base" /}
<!-- page specific plugin styles -->
{block name="plugin-styles"}{/block}
<!-- inline styles related to this page -->
{block name="inline-styles"}
<link rel="stylesheet" href="/static/ace/assets/css/colorbox.min.css" />
<style>
th,td{
    text-align:  center !important;
}
</style>
{/block}
<!-- breadcrumb -->
{block name="breadcrumbs"}
<ul class="breadcrumb">
    <li>
        <i class="ace-icon fa fa-home home-icon"></i>
        <a href="{:url('Index/index')}">首页</a>
    </li>
    <li class="active">
        <a href="{:url('agent/address')}">代理地址</a>
    </li>
</ul>
<!-- /.breadcrumb -->
{/block}
<!-- PAGE CONTENT BEGINS -->
{block name="content"}
<div class="page-header">
    <h1>
		添加地址
	</h1>
</div>
<!-- /.page-header -->
<div class="row">
    <div class="col-xs-12">
        <form class="form-horizontal" role="form">
        <input class="col-xs-6 col-sm-3" id="form-field-1" type="hidden" name='mid' value='{$mid}' readonly="readonly"></input>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                    代理名称
                </label>
                <div class="col-sm-6">
                    <input class="col-xs-6 col-sm-3" id="form-field-1" type="text" value='{$name}' readonly="readonly"></input>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                    收货类型
                </label>
                <div class="col-sm-6">
                    <select name='type'>
                        <option value='1'>收货地址</option>
                        <option value='2'>发货地址</option>
                    </select>
                </div>
            </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
		            姓名
		        </label>
		        <div class="col-sm-6">
                    <input class="col-xs-6 col-sm-3" id="form-field-1" placeholder="姓名" type="text" name="name" autocomplete="off"></input>
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1">
		            手机
		        </label>
		        <div class="col-sm-6">
                    <input class="col-xs-6 col-sm-3" placeholder="手机号" type="text" name="tel" autocomplete="off"></input>
		        </div>
		    </div>
		    <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1">
                    省份
                </label>
                <div class="col-sm-9">
                    <select name="province" onchange="checkProvince()">
                    </select>
                    <select name="city" onchange="checkCity()">
                    </select>
	                <select name="area">
	                    <!-- 使用data-*属性Map级联关系 -->
	                </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1">
                    详情地址
                </label>
                <div class="col-sm-8">
                    <input class="col-xs-10 col-sm-5" placeholder="详情地址" type="text" name="addr" autocomplete="off"></input>
                </div>
            </div>
             <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">
                    是否默认
                </label>
                <div class="col-sm-9">
                    <input class='radio' type="radio" name='ifdefault' value='1' checked>是</input>
                    <input class='radio' type="radio" name='ifdefault' value='2'>否</input>
                </div>
            </div>
		    <div class="space-4">
		    </div>
		    <div class="clearfix form-actions">
		        <div class="col-md-offset-3 col-md-9">
		            <button class="btn btn-info" type="button" onclick='add()'>
		                <i class="ace-icon fa fa-check bigger-110">
		                </i>
		                保存
		            </button>
		            <button class="btn" type="reset">
		                <i class="ace-icon fa fa-undo bigger-110">
		                </i>
		                重置
		            </button>
		        </div>
		    </div>
</form>
    </div>
</div>

<!-- /.table-responsive -->
{/block}
<!-- PAGE CONTENT ENDS -->
<!-- page specific plugin scripts -->
{block name="plugin-scripts"}
<script src="/static/ace/assets/js/jquery.colorbox.min.js"></script>

<script src="/static/plugin/jquery.form.js"></script>
<script src="/static/ace/assets/js/city.js"></script>
{/block}
<!-- inline scripts related to this page -->
{block name="related-scripts"}
<script type="text/javascript">
function getAddrvalue(province,city,area){
    var address = '';
    for(var i=0; i<rawCitiesData.length; i++){
        if(rawCitiesData[i].code == province){
            address += rawCitiesData[i].name
            var _dataCity= rawCitiesData[i].sub;
            for (var a=0; a < _dataCity.length; a++) {
                if(_dataCity[a].code == city){
                    // 区级选项
                    address += ' '+ rawCitiesData[i].sub[a].name
                    var _dataArea= rawCitiesData[i].sub[a].sub;
                    for (var b=0; b < _dataArea.length; b++) {
                        if(_dataArea[b].code == area){
                            address += ' '+ _dataArea[b].name
                        }
                    }
                }
                
            }
        }
    }
    return address;
}

function add(){
	province = $("select[name=province]").val();
	city = $("select[name=city]").val();
	area = $("select[name=area]").val();
	addrvalue = getAddrvalue(province,city,area);
    $.ajax({
        url: "/admin/agent/address_add_post",
        type: 'POST',
        dataType: 'json',
        data: {
            mid: $("input[name=mid]").val(),
            name: $("input[name=name]").val(),
            tel: $("input[name=tel]").val(),
            addrvalue: addrvalue,
            addr: $("input[name=addr]").val(),
            type: $("select[name=type]").val(),
            ifdefault:$("input[name='ifdefault']:checked").val()
        },
    })
    .done(function(json) {
        console.log("success");
        if(json.returnCode==1){
            alert("添加成功");
            window.location="{:url('agent/address')}";
        }else{
            alert(json.returnMsg);
        }
    })
    .fail(function() {
        console.log("error");
    })
    .always(function() {
        console.log("complete");
    });
}

    
    $(document).ready(function () {
    	
            
            //获取子select的option
            let childOptions = $("select[name='children']").find("option");
            
            $("select[name='parent']").change(cascadeSelect);
            //级联过滤方法 
            function cascadeSelect(event) {
                //获取选中index及value 
                let index = event.target["selectedIndex"];
                let item = event.target[index].value;
                //过滤方法1 
                let options = childOptions.filter(function () {
                    return (this.value == "" || this.dataset.parent == item);
                });
                //过滤方法2 
                // let options = Array.from(childOptions).filter(function (option) {
                //     return option.value == "" || option.dataset.parent == item
                // });
                //清空子select,重新绑定，并设定默认选中项 
                $("select[name='children']").empty().append(options);
                $("select[name='children']").find("option[value='']").prop("selected", true);
            }
        });


    //初始化城市联动
    initAddress();
    // 省级选项
    function initAddress() {
    	console.log(rawCitiesData)
        // 省级选项
        for(var i=0; i<rawCitiesData.length; i++){
            var _province='<option value="'+rawCitiesData[i].code+'">'+rawCitiesData[i].name+'</option>';
            $("select[name=province]").append(_province);
            
        }
        // 市级选项
        var _dataCity= rawCitiesData[0].sub;
        for (var i=0; i < _dataCity.length; i++) {
            var _city='<option value="'+_dataCity[i].code+'">'+_dataCity[i].name+'</option>';
            $("select[name=city]").append(_city);
        }
        // 区级选项
        var _dataArea= rawCitiesData[0].sub[0].sub;
        for (var i=0; i < _dataArea.length; i++) {
            var _area='<option value="'+_dataArea[i].code+'">'+_dataArea[i].name+'</option>';
            $("select[name=area]").append(_area);
        }
    }

    //选省
    function checkProvince(argument) {
        // body...
        var _code=$("select[name=province]").val();
        $("select[name=city]").empty();
        $("select[name=area]").empty();
        for(var i=0; i<rawCitiesData.length; i++){
            if(rawCitiesData[i].code == _code){
                var _dataCity= rawCitiesData[i].sub;
                for (var a=0; a < _dataCity.length; a++) {
                    var _city='<option value="'+_dataCity[a].code+'">'+_dataCity[a].name+'</option>';
                    $("select[name=city]").append(_city);
                }

                // 区级选项
                var _dataArea= rawCitiesData[i].sub[0].sub;
                for (var b=0; b < _dataArea.length; b++) {
                    var _area='<option value="'+_dataArea[b].code+'">'+_dataArea[b].name+'</option>';
                    $("select[name=area]").append(_area);
                }
            }
            
        }

    }

    //选市
    function checkCity(argument) {
        // body...
        $("select[name=area]").empty();
        var _codeProvince=$("select[name=province]").val();
        var _codeCity=$("select[name=city]").val();
        for(var i=0; i<rawCitiesData.length; i++){
            if(rawCitiesData[i].code == _codeProvince){
                var _dataCity= rawCitiesData[i].sub;
                for (var a=0; a < _dataCity.length; a++) {
                    if(_dataCity[a].code==_codeCity){
                        var _dataArea= _dataCity[a].sub;
                        for (var b=0; b < _dataArea.length; b++) {
                            var _area='<option value="'+_dataArea[b].code+'">'+_dataArea[b].name+'</option>';
                            $("select[name=area]").append(_area);
                        }
                    }
                    
                }
            }
            
        }
    }
    
    

   
</script>
{/block}